<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_uYTTv0',
'ZY_ZhiWuTiQuWu_1',
'ZY_ZhiWuYuanLiao_2',
'ZY_ZhiWuJingYou_3',
'ZY_DingZhiChanPin_4',
'ZY_QiTa_5',
'img_PxFZU6',
'ZY_WuWeiZiTiQuWu_7',
'ZY_ShuWeiCao_8',
'ZY_ChaKanGengDuo_9',
'img_ysvrC10',
'ZY_WuWeiZiTiQuWu_11',
'ZY_ShuWeiCao_12',
'ZY_ChaKanGengDuo_13',
'img_v63Nq14',
'ZY_WuWeiZiTiQuWu_15',
'ZY_ShuWeiCao_16',
'ZY_ChaKanGengDuo_17',
'img_NE0PX18',
'ZY_WuWeiZiTiQuWu_19',
'ZY_ShuWeiCao_20',
'ZY_ChaKanGengDuo_21',
'img_xOyQi22',
'ZY_WuWeiZiTiQuWu_23',
'ZY_ShuWeiCao_24',
'ZY_ChaKanGengDuo_25',
'img_xIDB526',
'ZY_WuWeiZiTiQuWu_27',
'ZY_ShuWeiCao_28',
'ZY_ChaKanGengDuo_29',
'ZY_30_30',
'ZY_31_31',
'ZY_32_32',
'ZY_33_33',
'mobile_banner_img'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
     <title>${网页标题}</title>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/wantai/mobile/css/swiper.min.css">
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/wantai/mobile/css/animate.css">
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/wantai/mobile/css/common.css">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
     <style>
         body{
             background: #f7f7f7;
         }
         .list{
             margin: -8px -8px;
         }
         .list .item{
             width: 50%;
             margin: 8px 0;
             text-align: center;
             box-sizing: border-box;
             padding: 0 8px;
         }
         .list .item>a{
             display: block;
             background: #ffffff;
         }
         .list .item img{
             max-width: 100%;
             margin: 10px auto 0;
         }
         .list .item .con{
             background: #ffffff;
             padding: 5px 20px 20px;
         }
         .list .item .name{
             color: #000000;
             font-size: 16px;
             margin-bottom: 10px;
         }
         .list .item .desc{
             color: rgba(0,0,0,0.8);
             font-size: 14px;
         }
         .search-box{
             padding: 0 15px;
             margin: 15px 0;
         }
         .search-box .search-btn{
             width: 60px;
             background: #23A04D;
             color: #ffffff;
             font-size: 14px;
             line-height: 36px;
             border: 0;
             cursor: pointer;
         }
         .search-box .search-input{
             padding: 0 10px;
             border: 1px solid #23A04D;
             font-size: 14px;
             border-radius: 0;
             box-shadow: none;
         }
         .search-box .search-btn,
         .search-box .search-input:focus{
             outline: #23A04D;
         }
         .search-box .letter-search{
             min-width: 16px;
             display: block;
             padding: 7px 10px;
             background: rgba(35, 160, 77, 0.1);
             color: #23A04D;
             font-size: 14px;
             cursor: pointer;
             text-align: center;
             margin: 5px 5px 0  0;
         }
         .list .item .desc{
             color: rgba(0,0,0,0.8);
             font-size: 14px;
         }
         .list .item .desc{margin-bottom: 0}
         .tab a{color: #000}
     </style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
  <jsp:include page="_top.jsp"></jsp:include> 
  <div class="banner"> 
   <img src="${mobile_banner_img.adImg}" class="img zy" data-type="ad" data-id="${mobile_banner_img.adId}">
  </div>

  <div class="container search-box">
      <div class="flex">
          <input placeholder="请输入搜索关键词" class="search-input flex-1" id="search-input"/>
          <button class="search-btn" onclick="toSearch()">搜索</button>
      </div>
  </div>

  <div class="container">
   <div class="tab-content"> 
    <div class="list flex flex-wrap animate__animated animate__fadeIn">
     <cms:searchArts var="artList" code="cpzx" pageNow="${param.page == null ? 0 : param.page }" pageSize="10" query="${param.query}" letter="${param.letter}"></cms:searchArts>
     <c:forEach items="${artList }" var="item" >
      <div class="item">
       <a href="${path }/do/redirect/mobile/productDetail?id=${item.artId}">
        <img src="${item.artImage}" class="zy">
       </a>
       <div class="con">
        <a href="${path }/do/redirect/mobile/productDetail?id=${item.artId}">
         <h2 class="name ellipsis zy" data-type="ad">${item.artTitle}</h2>
         <p class="desc ellipsis zy" data-type="ad">${item.artLables}</p> </a>
<%--        <a class="more zy" href="${ZY_ChaKanGengDuo_9.adUrl}" data-type="ad" data-id="${ZY_ChaKanGengDuo_9.adId}">${ZY_ChaKanGengDuo_9.adTitle}</a>--%>
       </div>
      </div>
     </c:forEach>
    </div>
   </div> 
  </div> 
  <div class="pagination">
   <c:forEach end="${recodeCount }" begin="1" var="index" varStatus="count">
    <a href="${path }/do/redirect/mobile/product?code=${param.code}&type=${param.type}&pageNow=${index-1}">${index}</a>
   </c:forEach>
  </div>
  <div class="container search-box">
      <div>
          <span class="color-gray">按首字母搜索：</span>
          <div class="flex flex-wrap mt-10">
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=A">A</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=B">B</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=C">C</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=D">D</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=E">E</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=F">F</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=G">G</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=H">H</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=I">I</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=J">J</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=K">K</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=L">L</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=M">M</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=N">N</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=O">O</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=P">P</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=Q">Q</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=R">R</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=S">S</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=T">T</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=U">U</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=V">V</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=W">W</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=X">X</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=Y">Y</a>
              <a class="letter-search" href="${path}/do/redirect/mobile/search?letter=Z">Z</a>
          </div>
      </div>
  </div>
  <jsp:include page="_footer.jsp"></jsp:include>  
  <script src="http://hwfile.jyymatrix.cc/wantai/mobile/js/swiper.min.js"></script>
  <script>
   var menuIcon = document.getElementById('menuIcon');
   var headerNav = document.getElementById('headerNav');
   var closeNav = document.getElementById('closeNav');
   menuIcon.addEventListener('click', function () {
    headerNav.style.display = "block";
   }, false)
   closeNav.addEventListener('click', function () {
    headerNav.style.display = "none";
   }, false)
  </script>

  <script>
      function toSearch() {
          var $input = document.getElementById("search-input");
          if ($input.value) {
              window.location.href='${path}/do/redirect/mobile/search?query=' + $input.value
          }
      }
  </script>
 </body>
</html>